<template>
	<view class="wx-box">
		<view class="flex-column wx-style" style="padding: 0rpx 40rpx 0rpx 38rpx;">
			<x-submitPrintTop :yul="false" :title="messageLists.name" :img='messageLists.imglogo'></x-submitPrintTop>
		</view>
		<view class="greenPulse"
			style="height: 480rpx;width: 680rpx;  box-sizing: border-box;overflow: hidden;border: 1px  solid red;">
			<scroll-view scroll-y="true" style="height: 480rpx;width: 720rpx; box-sizing: border-box;overflow: hidden; "
				v-if="urls">
				<view class="" style="height: 480rpx;width: 680rpx;  transform:rotate(90deg);"
					@click="domsubmitBolen && previe()">
					<image style=" " :src="urls" mode=""></image>
				</view>
			</scroll-view>
		</view>
		<view class=""
			style="width: 100%;margin: 10rpx 0rpx; color: #17aaff;font-size: 30rpx;font-weight: bold;text-align: center;">
			点击红色相框区域，可以放大浏览
		</view>
		<view class="wx-style " style="padding: 0rpx 42rpx 0rpx 40rpx">
			<view class="" style="padding: 42rpx 0rpx;">
				<view class="just-between">
					<view class="color-9">
						打印份数
					</view>
					<view class="">
						<u-number-box v-model="num" :disabled="!domsubmitBolen" @change="valChange()" min="1"
							@blur="valblur()" @minus="submitBolen()" @plus="submitBolen()"></u-number-box>
					</view>
				</view>
			</view>
			<x-line></x-line>
			<!-- 支付金额 -->
			<view class="" style="padding: 42rpx 0rpx  42rpx ;">
				<view class="just-between">
					<view class="color-9">
						支付金额
					</view>
					<view class="">
						￥{{dataPrice}}
					</view>
				</view>
			</view>
		</view>
		<x-submitButton @submit="domsubmitBolen && submit()"></x-submitButton>
		<!-- 支付完成的弹窗 -->
		<x-popu :show="showPay">
			<!-- 主标题 -->
			<template slot="content">
				{{titlesshow}}
			</template>
			<!-- 副标题 -->
			<template slot="contentItem">
				{{titleItem}}
			</template>
		</x-popu>

		<view v-if="uprogress" class="flex aj-center " style=" position: absolute; width: 306rpx;height: 216rpx; left: 50%;  top: 50%; border-radius: 9%;
			  transform: translate(-50%,-50%); background-color: #313131;">
			<u-circle-progress active-color="#FE5734" :percent="percentgo" style="margin: auto;" bg-color="#313131">
				<view class="">
					<x-circle-progress></x-circle-progress>
				</view>
			</u-circle-progress>
		</view>
	</view>
</template>
<script>
	import {
		choosImg,
		choosImgend
	} from '@/api/applet/chooseImgPrint.js'
	import {
		TotalAmount
	} from '@/api/TotalAmount.js'
	import {
		SubmitOrder
	} from '@/api/SubmitOrder.js'
	import {
		noorder
	} from '@/api/noOrder.js'
	import {
		easyImg
	} from '@/utils/applet/chooseImgPrint.js'
	export default {
		data() {
			return {
				messageLists: {},
				openid: '',
				titlesshow: '',
				titleItem: '',
				dataPrice: '', //价格
				sku: '',
				specId: '',
				phone: '',
				urls: '',
				urlsArray: [],
				pages: '', //页数
				saleQty: '', //张数 
				domsubmitBolen: false, //控制着所有按钮的点击
				showPay: false, //退出的弹窗
				num: 1,
				unifyO: {}, //支付的参数
				uprogress: true, //控制圆形显示
				percentgo: 0,
				timer: null
			}
		},
		onShow() {
			if (wx.canIUse('hideHomeButton')) {
				wx.hideHomeButton()
			}
		},
		onLoad(option) {
			this.openid = uni.getStorageSync("openid")
			console.log(option, 'option')
			if (typeof option.messageList == 'string' && option.messageList != undefined) {
				// 选择文件选择完毕之后携带过来的数据显示在本页面上
				var messageListWx = JSON.parse(option.messageList)
				console.log(messageListWx, 'messageListWx')
				this.messageLists = messageListWx;
				this.sku = messageListWx.skuid;
				this.specId = messageListWx.specid;
				console.log(this.messageLists, 'this.messageLists') //文件信息包含文件路径
			}
			this.idphoneChange(); //1发送选择的证件照 
		},
		methods: {
			valChange() {
				this.TotalAmount()
			},
			valblur() {
				this.TotalAmount()
			},
			submitBolen() {
				this.TotalAmount()
			},
			previe() {
				easyImg(this.urlsArray, 0)
			},
			idphoneChange() {
				this.timer = setInterval(() => {
					this.percentgo += 10;
					if (this.percentgo == 90) {
						clearInterval(this.timer);
					}
				}, 1000)
				choosImg({
					filePath: this.messageLists.path,
					postdata: [{
							fileId: 'unionId', //unicode
							value: this.openid
						},
						{
							fileId: 'orderId',
							value: this.messageLists.orderId, //订单id
						},
						{
							fileId: 'specId', //
							value: this.specId, //证件照规格idthis.specId
						},
						{
							fileId: 'index',
							value: '1'
						}, {
							fileId: 'count',
							value: '2'
						}
					],
				}).then(res => {
					console.log(res, 'res1111111111111111111111111111111');
					if (res.success == true) {
						console.log(res, 'res1111111111111111111111111111111');
						this.urls = res.data.url; //预览的照片
						this.urlsArray.push(res.data.url);
						this.pages = res.data.pages; //页数   
						choosImgend([{
							fileId: 'orderId',
							value: this.messageLists.orderId
						}, {
							fileId: 'unionId',
							value: this.openid
						}]).then(result => {
							console.log(result, '第二个接口成功')
							// 去获取价格和张数
							this.TotalAmount()
						})
					} else {
						this.uprogress = false;
						uni.showModal({
							title: res.message,
							content: '是否重新上传',
							success: (result) => {
								if (result.confirm) {
									noorder({
										postdata: [{
											"field": "orderId", //订单id
											"value": this.messageLists.orderId
										}]
									}).then(res => {
										uni.redirectTo({
											url: './id-phone-imgApp'
										})
									})
								} else if (result.cancel) {
									this.showPay = true;
									this.titlesshow = res.message;
									this.titleItem = '退出重试'
								}
							},
							fail: () => {

							}
						})

						console.log('错误')
					}
				}).catch(error => {})
			},

			TotalAmount() {
				TotalAmount({
					postdata: [{
						"field": "orderId",
						"value": this.messageLists.orderId
					}, {
						"field": "SKUId",
						"value": this.sku
					}, {
						"field": "itemQty", //总的页数
						"value": this.pages * this.num,
					}, {
						"field": "itemAuxQty", //份数
						"value": this.num
					}]
				}).then(res => {
					console.log(res, '价格')
					this.percentgo = 100;
					this.uprogress = false;
					this.dataPrice = res.data.totalAmount; //价格
					this.saleQty = res.data.saleQty; //张数  
					this.domsubmitBolen = true;
				}).catch()
			},
			// 提交
			submit() {
				this.domsubmitBolen = false;
				uni.showLoading({
					title: '检测支付环境...'
				})
				SubmitOrder({
					postdata: [{
						"field": "orderId", //订单id
						"value": this.messageLists.orderId,
					}, {
						"field": "SKUId", //skuid
						"value": this.sku,
					}, {
						"field": "itemQty", //页数*数量
						"value": this.pages * this.num
					}, {
						"field": "itemSaleQty", //张数
						"value": this.saleQty
					}, {
						"field": "itemAuxQty", //份数
						"value": this.num
					}, {
						"field": "tradeType", //支付方式，终端为空，小程序支付：JSAPI
						"value": "JSAPI"
					}, {
						"field": "openId", //支付方式为JSAPI必传
						"value": this.openid
					}, ]
				}).then(res => {
					this.unifyO = res.data.unifyOrderResponse;
					uni.hideLoading()
					uni.requestPayment({
						timeStamp: this.unifyO.timeStamp,
						nonceStr: this.unifyO.nonceStr,
						package: this.unifyO.prepayId,
						signType: 'MD5',
						paySign: this.unifyO.sign,
						success: (res) => {
							this.titlesshow = '付款成功'; //主标题
							this.titleItem = '点击确定操作打印机'; //副标题
							this.showPay = true; //显示退出的弹窗    
						},
						fail: (res) => {
							uni.showToast({
								title: '支付失败',
								icon: "error"
							})
							noorder({
								postdata: [{
									"field": "orderId", //订单id
									"value": this.messageLists.orderId
								}]
							}).then(res => {
								this.domsubmitBolen = true; //关闭弹窗之后再次点击提交支付把这个按钮设置可以点击状态 
							})
						}
					})
				}).catch()
			}
		}
	}
</script>

<style>
	@-webkit-keyframes greenPulse {
		from {
			border: 2px solid #FF1414;
			/* -webkit-box-shadow: 0 0 2px #FF1414; */
		}

		50% {
			border: 1px solid #FFFFFF;
			/* -webkit-box-shadow: 0 0 4px #FF1414; */
		}

		to {
			border: 2px solid #FF1414;
			/* -webkit-box-shadow: 0 0 2px #FF1414; */
		}
	}

	.greenPulse {
		-webkit-animation-name: greenPulse;
		-webkit-animation-duration: 3s;
	}

	.greenPulse {
		-webkit-animation-iteration-count: infinite;
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
		color: "fb9126";
		font-weight: bolder;
		color: #FFFFFF;

	}

	.wx-box {
		margin: 10rpx 30rpx 0rpx 30rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		overflow: hidden;
	}

	.wx-style {
		width: 100%;
		/* height: 350rpx; */
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5);
		border-radius: 5px;
		/* border: 1px solid red; */
		margin-bottom: 30rpx
	}

	.wx-top {
		height: 148rpx;
		border-bottom: 2rpx #F6F4F2
	}

	.wx-auto {}

	.wx-bottom {}

	.wx-submit {
		background: #CCCCCC;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		opacity: 0.5;
		border-radius: 20px;
		width: 100%;
		height: 80rpx;
		font-size: 18px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #FFFFFF
	}

	.wx-selesubmit {
		background: #FF9566;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);

		border-radius: 20px;
		width: 100%;
		height: 80rpx;
		margin-top: 60rpx
	}

	.wx-title {
		width: 320rpx;
		font-size: 16px;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: #222222;
	}

	.tishi {
		font-size: 20rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #999999;
	}

	.aubmit-box {
		height: 108rpx;
		width: 100%;
		border-bottom: 2rpx solid #F6F4F2;
	}

	.num {
		margin-right: 30rpx;
		margin-left: 30rpx;
		font-size: 15px;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: #222222;
	}

	.jia {
		width: 42rpx;
		height: 42rpx;
	}

	.jian {
		width: 42rpx;
		height: 42rpx;
		/* background: #F5F7F9;
			border-radius: 5px; */
	}

	.print {
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #999999;
	}

	.submit-bottom {
		height: 104rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16rpx 0px rgba(230, 230, 230, 0.5);
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 40rpx 40rpx 40rpx 42rpx;
	}

	.select-print {
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #999999;
	}

	.imgCode {
		font-size: 13px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #FE5734;

	}

	.wx-selesubmit {
		font-size: 36rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #FFFFFF;
	}

	/* 微信支付 */
	.pay-yue {
		padding: 40rpx 60rpx 40rpx 60rpx;
		border-bottom: 2rpx solid #F6F4F2;
	}

	.selepay {
		padding-top: 94rpx;
		padding-bottom: 80rpx;
		text-align: center;
		font-size: 18px;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: #000000;
		border-bottom: 2rpx solid #F6F4F2;
	}

	.wxpay {
		font-size: 15px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #333333;
	}

	.wx-change {
		width: 30rpx;
		height: 22rpx;
	}

	/* 余额支付 */
	.yue-pay {
		padding: 40rpx 60rpx 80rpx 60rpx;
	}

	.yue-img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 38rpx;
	}

	.yue-s {
		font-size: 15px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #A8A8A8;
	}

	.submit-pay {
		height: 100rpx;
		background: #FFCAB2;

		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: #FFFFFF;
	}

	.colours {
		width: 142rpx;
		height: 62rpx;
		position: relative
	}

	.colours>view {
		position: absolute;
		width: 100%;
		line-height: 62rpx;
		text-align: center;
		font-size: 14px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
	}

	.colours>text {
		position: absolute;
		width: 100%;
		line-height: 62rpx;
		/* bottom: 0rpx;left: 0rpx; */
		text-align: center;
		font-size: 14px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
	}

	.colours-yes {
		color: #FE5734;
	}

	.colours-no {
		border: 1px solid #E7E6E9;
		border-radius: 5px;
		color: #222222;
	}

	.shadow {
		background: #F8FAFB;
		height: 32rpx;
		/* width: 362rpx; */
		/* width: 100%; */
		margin-top: 10rpx;
		margin-left: 20rpx;
		padding-left: 20rpx;
		border-radius: 2px;
	}

	.shadow>image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.wx-top {

		height: 148rpx;
		border-bottom: 2rpx #F6F4F2;
	}

	.wx-title {
		width: 320rpx;
		font-size: 16px;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: #222222;
	}

	.size {
		font-size: 10px;
		color: #999999;
	}

	.title-bold {
		width: 140rpx;
		font-size: 16px;
		font-family: PingFang-SC-Bold;

		font-weight: bold;
		color: #171520;
	}
</style>
